<template>
    <div>
        <div id="container" style="height: 300px;border: 1px solid gray;"></div>
        <el-divider content-position="left">影院列表</el-divider>
        <el-table :data="cinemaList">
            <el-table-column label="影院名称">
                <template slot-scope="scope">
                        <i class="el-icon-video-camera-solid" style="margin-right: 10px; font-size: 1.2em;"></i>{{ scope.row.cinema_name}}
                </template>
            </el-table-column>
            <el-table-column label="影院地址">
                <template slot-scope="scope">
                    {{ scope.row.province }}-{{ scope.row.city }}-{{ scope.row.district }}
                </template>
            </el-table-column>
            <el-table-column label="影院位置" prop="address"></el-table-column>
            <el-table-column label="操作" width="240px">
                <template slot-scope="scope">
                    <el-button circle type="info" class="el-icon-s-promotion" @click="moveTo(scope.$index)"></el-button>
                    <el-button circle type="success" class="el-icon-s-operation" @click="$router.push(`/home/cinema-room/${scope.row.id}`)"></el-button>
                    <el-button circle @click="$router.push(`/home/cinema-update/${scope.row.id}`)" type="warning" class="el-icon-edit"></el-button>
                    <el-button @keydown.native.prevent circle type="danger" class="el-icon-delete" @click="deleteCinema(scope.row.id)"></el-button>                   
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import httpApi from '@/http/index'
    export default {
        data() {
            return {
                // 影院列表
                cinemaList:[]
            }
        },
        mounted () {
            this.initCinemas()
        },
        methods: {
            // 将地图中心的位置移动到某一个影院的位置
            moveTo(index){
                let target = this.cinemaList[index]
                let lnglat = [target.longitude,target.latitude]
                //让地图移动到该位置
                if(this.map){           // 缩放级别   经纬度
                    this.map.setZoomAndCenter(17,lnglat)
                }
            },
                    // 加载地图方法
            initAMap() {
                AMapLoader.load({
                    key: "f5dd6cbc880a07f933294bf0f764406f", // 申请好的Web端开发者Key，首次调用 load 时必填
                    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                })
                    .then((AMap) => {
                    this.map = new AMap.Map("container", {
                        // 设置地图容器id
                        viewMode: "3D", // 是否为3D地图模式
                        zoom: 12, // 初始化地图级别
                        center: [112.960048,28.165389], // 初始化地图中心点位置
                    });
                    this.cinemaList.forEach((item)=>{
                        let marker = new AMap.Marker({
                            position: new AMap.LngLat(item.longitude,item.latitude),
                            title:"cinema_name"
                        })
                        this.map.add(marker)
                        // 给每一个生成得标点 绑定事件
                        marker.on('click',(ev)=>{
                            console.log(ev)
                            //弹出信息窗口
                            let content = `
                            <p>${item.cinema_name}</p>
                            <p>${item.address}</p>
                            <p>${item.address}</p>
                            <p>${item.address}</p>
                            <p>${item.address}</p>
                            <p>${item.address}</p>
                            <p>${item.address}</p>
                            `
                            let infoWindow = new AMap.InfoWindow({
                                content,
                                // 窗口的偏移量，有可能出现窗口覆盖图标的问题j
                                offset:[0,-35]
                            })
                            infoWindow.open(this.map,[item.longitude,item.latitude])
                        })
                    })
                    })
                    .catch((e) => {
                    console.log(e);
                    });
                },
            initCinemas(){
                httpApi.cinemaApi.queryAll().then(res=>{
                    console.log('查询影院列表',res)
                    this.cinemaList = res.data.data
                     this.initAMap()
                })     
            },
            deleteCinema(id){  
                        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        })
                        .then(() => {   
                            httpApi.cinemaApi.deleteCinema({id}).then(res=>{
                                console.log(res)
                                if(res.data.code == 200){
                                    this.initCinemas()
                                }
                            })                         
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });          
                        });       

            }
        }
    }
</script>

<style lang="scss" scoped>

</style>